<template>
  <el-dialog v-model="visible" title="缴费" width="800px" :before-close="handleClose">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="回款计划信息">
        <el-card shadow="never" class="plan-info-card">
          <div class="plan-info-item">
            <span class="label">所属公司:</span>
            <span class="value">{{ form.companyName }}</span>
          </div>
          <div class="plan-info-item">
            <span class="label">缴费周期:</span>
            <span class="value">{{ form.cycle }}</span>
          </div>

          <div class="plan-info-item">
            <span class="label">合同编号:</span>
            <span class="value">{{ form.contractNumber }}</span>
          </div>
          <div class="plan-info-item">
            <span class="label">应缴费用金额:</span>
            <span class="value">{{ form.amount }}</span>
          </div>
          <div class="plan-info-item">
            <span class="label">已付金额:</span>
            <span class="value">{{ form.paidAmount }}</span>
          </div>
          <div class="plan-info-item">
            <span class="label">剩余金额:</span>
            <span class="value">{{ form.remainingAmount }}</span>
          </div>
          <div class="plan-info-item">
            <span class="label">月度金额:</span>
            <span class="value">{{ form.monthPrice }}</span>
          </div>
          <div class="plan-info-item">
            <span class="label">费用类型:</span>
            <span class="value">{{ form.type }}</span>
          </div>
          <div class="plan-info-item">
            <span class="label">备注: </span>
            <span class="value">{{ form.remake }}</span>
          </div>
        </el-card>
      </el-form-item>
      <el-form-item label="缴费金额" prop="paymentAmount">
        <el-input-number
          v-model="form.paymentAmount"
          :min="0"
          :precision="2"
          controls-position="right"
          style="width: 100%"
          placeholder="请输入缴费金额"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, watch } from "vue";
import { insertPaymentHistory, getOneById } from "@/api/company/info.js";
import { ElMessage } from "element-plus";

const props = defineProps({
  modelValue: Boolean,
  companyId: String,
  planId: String,
});

const emit = defineEmits(["update:modelValue", "success", "close"]);

const visible = ref(false);
const formRef = ref(null);
const form = reactive({
  contractNumber: "",
  companyId: "",
  totalAmount: 0,
  paidAmount: 0,
  remainingAmount: 0,
  paymentAmount: 0,
});

const rules = reactive({
  paymentAmount: [
    { required: true, message: "请输入缴费金额", trigger: "blur" },
    { validator: validateAmount, trigger: "blur" },
  ],
});

function validateAmount(rule, value, callback) {
  if (value <= 0) {
    callback(new Error("缴费金额必须大于0"));
  } else {
    callback();
  }
}

watch(
  () => props.modelValue,
  async (val) => {
    visible.value = val;
    if (val) {
      // 重置表单
      form.companyId = props.companyId;
      form.paymentAmount = 0;

      // 根据planId获取回款计划详情
      try {
        const { data } = await getOneById(props.planId);
        if (data) {
          const plan = data;
          (form.id = plan.id),
            (form.contractNumber = plan.contractNumber),
            (form.cycle = plan.cycle),
            (form.companyName = plan.companyName),
            (form.unitPrice = plan.unitPrice),
            (form.monthPrice = plan.monthPrice),
            (form.startTime = plan.startTime),
            (form.companyId = plan.companyId),
            (form.amount = plan.amount),
            (form.paidAmount = plan.paidAmount),
            (form.remainingAmount = plan.remainingAmount),
            (form.remake = plan.remake),
            (form.status = plan.status),
            (form.statusDesc = plan.statusDesc),
            (form.type = plan.type),
            (form.companyId = plan.companyId),
            (form.createZtBy = plan.createZtBy),
            (form.total = plan.total);
        }
      } catch (error) {
        console.error("获取回款计划详情失败:", error);
        ElMessage.error("获取回款计划信息失败");
      }
    }
  }
);

function handleClose() {
  emit("update:modelValue", false);
  emit("close");
}

async function handleSubmit() {
  try {
    await formRef.value.validate();
    const res = await insertPaymentHistory({
      companyId: form.companyId,
      contractNumber: form.contractNumber,
      amount: form.paymentAmount,
      remainingAmount: form.paymentAmount,
    });
    if (res.code === 200) {
      ElMessage.success("缴费成功");
      emit("success");
      handleClose();
    } else {
      ElMessage.error(res.msg || "缴费失败");
    }
  } catch (error) {
    console.error(error);
  }
}
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
.amount-info {
  margin-top: 5px;
  font-size: 12px;
  color: #999;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.plan-info-card {
  width: 100%;
}

.plan-info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.plan-info-item .label {
  font-weight: bold;
  margin-right: 10px;
}

.plan-info-item .value {
  flex: 1;
  text-align: right;
}

.loading-text {
  text-align: center;
  color: #999;
}
</style>
